<template>
  <div class="container">
    <baleTable :tableData="tableData" :tableHead="tableHeadOrderList" :isSearch="true" :isTableRowClick="true"
      :tableLoading="tableLoading" :page="page" @pageSizeChange="pageSizeChange"
      @handleCurrentChange="handleCurrentChange" @searchMethods="searchMethods" @handleRowClick="handleRowClick"
      ref="baleTable">
      <template #totalDetail="{ scope }">
        <div @click.stop="">
          <el-popover placement="top-start" width="200" trigger="hover">
            <div v-for="(item, index) in scope.row.price_detailCopy" :key="index">
              {{ item.name }}:{{ item.value }}
            </div>
            <el-button size="small" type="primary" slot="reference">价格详情</el-button>
          </el-popover>
        </div>
      </template>

      <template #unit_id="{ scope }">
        {{scope.row.unit.name}}
      </template>

      <template #status="{ scope }">
        <el-tag :type="formatterStatus(scope.row.status).type">
          {{ formatterStatus(scope.row.status).name }}</el-tag>
      </template>
      <template #finish_time="{ scope }">
        {{ scope.row.finish_time?scope.row.finish_time:scope.row.cancel_time }}
      </template>
    </baleTable>
    <orderDetail ref="orderDetail" @refresh="getTableData"></orderDetail>

  </div>
</template>

<script>
import { tableHeadOrderList } from "./config";
import {
  ApiGetOrderList,
} from "@a/index";
import orderDetail from '../../order/component/detail.vue'
export default {
  components: {
    orderDetail,
  },
  data() {
    return {
      tableHeadOrderList,
      formInline: {},
      page: {
        page: 1,
        size: 25,
        total: 0,
      },
      searchParams: {},
      sortParams: {},
      tableLoading: false,
      tableData: [],
      statusFormatter: [
        {
          name: "待支付",
          code: "1",
          type: "danger",
        },
        {
          name: "进行中",
          code: "2",
          type: "warning",
        },
        {
          name: "已付款",
          code: "3",
          type: "",
        },

        {
          name: "已取消",
          code: "4",
          type: "danger",
        },
        {
          name: "已评价",
          code: "5",
          type: "",
        },
        {
          name: "退款中",
          code: "6",
          type: "danger",
        },
      ],
    };
  },
  mounted() {
    this.getTableData();
    setTimeout(() => {
      /*    this.getData(); */
    }, 3000);
  },

  methods: {
    formatterStatus(val) {
      if(val == 4) {
        return {
          name: "已退款",
          type: "danger",
        }
      } else {
        return {
          name: "已付款",
          type: "",
        }
      }
    },

    //订单列表
    getTableData(params = {}) {

      let postParams = {
        ...this.formInline,
        ...this.sortParams,
        ...this.page,
        ...params,
        ...this.searchParams,
        financial: 1,
      };
      this.tableLoading = true;
      this.tableData = [];
      ApiGetOrderList(postParams)
        .then((res) => {
          let { data, page } = res;
          this.tableData = data;
          this.page.total = page.total;
          this.tableLoading = false;
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    searchMethods(params) {
      this.searchParams = {};
      this.page.page = 1;
      //重置当前订单数据
      this.searchParams = params;
      this.getTableData();
    },
    pageSizeChange(val) {
      this.page.size = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.getTableData();
    },

    //订单详情列表查看
    handleRowClick(row) {
      this.$refs.orderDetail.show(row.row);
    },
  },
};
</script>
<style></style>
